<template>
  <div class="wrapper">
    <!-- header部分 -->
    <header>
      <p>我的订单</p>
    </header>
    <div class="nav">
      <el-tabs class="demo-tabs" @tab-click="handleClick">
        <el-tab-pane label="全部" name="all"></el-tab-pane>
        <el-tab-pane label="进行中" name="ongoing"></el-tab-pane>
        <el-tab-pane label="待评价" name="toBeEvaluated"></el-tab-pane>
        <el-tab-pane label="已完成" name="done"></el-tab-pane>
      </el-tabs>
    </div>
    <!-- 订单列表部分 -->
    <div class="order-list">
      <OrderList :order-state="condition" />
    </div>
    <!-- 底部菜单部分 -->
    <Footer />
  </div>
</template>

<script setup>
import { ref } from 'vue';
import Footer from "@/components/Footer.vue";
import OrderList from "./OrderList.vue";

const condition = ref('all')
const handleClick = (tab) => { condition.value = tab.props.name; };

</script>

<style scoped>
.order-list {
  position: fixed;
  top: 28vw;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
}

.wrapper .nav {
  position: fixed;
  top: 12vw;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
}

/****************** 总容器 ******************/
.wrapper {
  width: 100%;
  height: 100%;
}

/****************** header部分 ******************/
.wrapper header {
  width: 100%;
  height: 12vw;
  background-color: #0097ff;
  color: #fff;
  font-size: 4.8vw;

  position: fixed;
  left: 0;
  top: 0;
  z-index: 1000;

  display: flex;
  justify-content: center;
  align-items: center;
}
</style>